"use client"
import React from 'react';
import { Layout, Card, Row, Col, Typography, ConfigProvider } from 'antd';
import { RocketOutlined, SafetyCertificateOutlined, ThunderboltOutlined, GlobalOutlined } from '@ant-design/icons';
import Head from './Header';
import { useRouter } from 'next/navigation';
import {Link, Button} from "@nextui-org/react";

const { Content, Footer } = Layout;
const { Title, Paragraph } = Typography;

const App: React.FC = () => {
  const router = useRouter();

  const handleViewDetail = (productId: string) => {
    router.push(`/product/${productId}`);
  };

  return (
    <Layout className="min-h-screen">
      <Head />

      {/* Hero Section */}
      <div className="relative h-[400px] md:h-[600px] overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-blue-400 to-teal-500 opacity-90" />
        <div
          className="absolute inset-0"
          style={{
            backgroundImage: 'url("/medical-bg.jpg")', // 需要替换为医疗相关的背景图
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            zIndex: -1
          }}
        />
        <div className="relative container mx-auto px-4 h-full flex items-center">
          <div className="max-w-2xl text-white">
            <h1 className="text-3xl md:text-5xl font-bold mb-4 md:mb-6">
              专业医疗，温暖服务
            </h1>
            <p className="text-base md:text-xl mb-6 md:mb-8 opacity-90">
              以患者为中心，提供全方位的医疗保健服务，守护您和家人的健康
            </p>
            <div className="flex flex-col sm:flex-row gap-4 sm:space-x-4">
              <Button
                size="lg"
                color="primary"
                className="w-full sm:w-auto"
              >
                预约问诊
              </Button>
              <Button
                size="lg"
                variant="bordered"
                className="w-full sm:w-auto"
              >
                了解更多
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* 特点展示 */}
      <div className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <Title level={2} className="text-center mb-16">
            我们的优势
          </Title>
          <Row gutter={[32, 32]} className="max-w-6xl mx-auto">
            <Col xs={24} sm={12} lg={6}>
              <Card
                className="h-full hover:shadow-lg transition-shadow duration-300"
                bordered={false}
              >
                <div className="text-center">
                  <i className="fas fa-user-md text-4xl text-blue-500 mb-4" />
                  <Title level={4}>专业医师</Title>
                  <Paragraph className="text-gray-600">
                    资深专家团队，经验丰富
                  </Paragraph>
                </div>
              </Card>
            </Col>
            <Col xs={24} sm={12} lg={6}>
              <Card
                className="h-full hover:shadow-lg transition-shadow duration-300"
                bordered={false}
              >
                <div className="text-center">
                  <i className="fas fa-heartbeat text-4xl text-green-500 mb-4" />
                  <Title level={4}>全面护理</Title>
                  <Paragraph className="text-gray-600">
                    个性化治疗方案定制
                  </Paragraph>
                </div>
              </Card>
            </Col>
            <Col xs={24} sm={12} lg={6}>
              <Card
                className="h-full hover:shadow-lg transition-shadow duration-300"
                bordered={false}
              >
                <div className="text-center">
                  <i className="fas fa-clock text-4xl text-yellow-500 mb-4" />
                  <Title level={4}>便捷预约</Title>
                  <Paragraph className="text-gray-600">
                    在线预约，省时省力
                  </Paragraph>
                </div>
              </Card>
            </Col>
            <Col xs={24} sm={12} lg={6}>
              <Card
                className="h-full hover:shadow-lg transition-shadow duration-300"
                bordered={false}
              >
                <div className="text-center">
                  <i className="fas fa-comments text-4xl text-purple-500 mb-4" />
                  <Title level={4}>贴心服务</Title>
                  <Paragraph className="text-gray-600">
                    24小时专业咨询服务
                  </Paragraph>
                </div>
              </Card>
            </Col>
          </Row>
        </div>
      </div>

      {/* 服务项目展示 */}
      <div className="py-20">
        <div className="container mx-auto px-4">
          <Title level={2} className="text-center mb-16">
            特色医疗服务
          </Title>
          <Row gutter={[32, 32]}>
            {[
              {
                title: '内科诊疗',
                desc: '专业内科诊断治疗，全面身体检查',
                // img: '/internal-medicine.jpg'
                img: 'https://img.shetu66.com/2023/06/26/1687741754142411.png'
              },
              {
                title: '康复理疗',
                desc: '专业康复指导，恢复身体机能',
                // img: '/rehabilitation.jpg'
                img: 'https://pic4.zhimg.com/v2-c34c61a90095abb8713de9d1dca7ec7b_r.jpg'
              },
              {
                title: '中医养生',
                desc: '传统中医理疗，调养身心健康',
                // img: '/tcm.jpg'
                img: 'https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg'
              }
            ].map((item, index) => (
              <Col key={index} xs={24} sm={12} lg={8}>
                <Card
                  hoverable
                  className="h-full transition-all duration-300 hover:shadow-lg"
                  cover={
                    <div className="h-48 sm:h-56 md:h-48 lg:h-56 bg-gray-200 overflow-hidden">
                      <img
                        alt={item.title}
                        src={item.img}
                        className="w-full h-full object-cover hover:scale-125 transition-transform duration-300"
                      />
                    </div>
                  }
                >
                  <Card.Meta
                    title={
                      <div className="text-lg font-semibold">{item.title}</div>
                    }
                    description={
                      <div className="mt-2">
                        <p className="text-gray-600 mb-4">{item.desc}</p>
                        <Button
                          as={Link}
                          color="primary"
                          className="w-full"
                          onClick={() => handleViewDetail(index.toString())}
                        >
                          了解详情
                        </Button>
                      </div>
                    }
                  />
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      </div>

      {/* CTA 部分 */}
      <div className="py-12 md:py-20 bg-gradient-to-r from-blue-400 to-teal-500 text-white px-4">
        <div className="container mx-auto text-center max-w-2xl">
          <Title level={2} className="text-2xl md:text-3xl mb-4 md:mb-8" style={{color: 'white'}}>
            需要医疗咨询？
          </Title>
          <Paragraph className="text-base md:text-lg mb-6 md:mb-8 opacity-90" style={{color: 'white'}}>
            专业医师在线为您解答，立即预约咨询
          </Paragraph>
          <Button
            size="lg"
            className="w-full sm:w-auto bg-white/90 hover:bg-white"
          >
            在线预约
          </Button>
        </div>
      </div>

      <Footer className="text-center bg-gray-800 text-white py-8">
        <div className="container mx-auto px-4">
          <p className="mb-4">© {new Date().getFullYear()} 康复诊所. All rights reserved.</p>
          <div className="flex justify-center space-x-6">
            <a href="#" className="text-gray-400 hover:text-white">关于我们</a>
            <a href="#" className="text-gray-400 hover:text-white">联系方式</a>
            <a href="#" className="text-gray-400 hover:text-white">隐私政策</a>
            <a href="#" className="text-gray-400 hover:text-white">服务条款</a>
          </div>
        </div>
      </Footer>
    </Layout>
  );
};

export default App;
